<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <link rel="shortcut icon" type="image/ico" href="favicon.ico" />
  <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/>
  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
  <link rel="stylesheet" href="examples.css" type="text/css"/>
  <link rel="stylesheet" href="../controls/slick.gridmenu.css" type="text/css"/>
  <style>
    .slick-headerrow-column {
      background: #BDD8E0;
      text-overflow: clip;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }

    .slick-headerrow-column input {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    .icon-help {
      background-image: url(../images/help.png);
    }
  </style>
</head>
<body>
<div style="position:relative">
  <div style="width:600px;">
    <div id="myGrid" style="width:100%;height:500px;"></div>
  </div>
  <div class="options-panel">
    &lt;== Top Right Corner
    <h2>Demonstrates:</h2>
    <ul>
      <li>This example demonstrates using the Slick.Controls.GridMenu to add a Grid Menu (hamburger menu on top right of the grid)</li>
      <li>Possibility to add custom menu items via a simple array provided to the grid options (same concept as the header menu plugin)</li>
      <li>Includes column picker list.</li>
      <li>Optional title for the custom menu items (top section)</li>
      <li>Optional title for the columns list (bottom section)</li>
      <li>To dismiss the Grid Menu, user can click on the "x" on top right corner or anywhere outside of the Grid Menu</li>
      <li>Possibility to attach the Grid Menu to an external button (try clicking on the button below).</li>
      <li>You can also use some events like "onMenuClose()" and to trigger a resize of the columns with "autosizeColumns()" when "forceFitColumns: false"</li>
      <p>
        <button onclick="toggleGridMenu(event)"><img src="../images/drag-handle.png"/> Grid Menu</button>
      </p>
      <p>
        Always show vertical scroll (with "alwaysShowVerticalScroll" flag), so that it works with small and large dataset.
        Not using this flag, might have side effect on the UI with the Grid Menu overlapping with the data in background.
      </p>
      <div style="margin-bottom:10px">
        <button onclick="loadData(15)">15 rows</button>
        <button onclick="loadData(5000)">5000 rows</button>
      </div>
      <h2>View Source:</h2>
      <ul>
          <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example-grid-menu.html" target="_sourcewindow"> View the source for this example on Github</a></li>
      </ul>

  </div>
</div>

<script src="../lib/firebugx.js"></script>

<script src="../lib/jquery-1.11.2.min.js"></script>
<script src="../lib/jquery-ui-1.11.3.min.js"></script>
<script src="../lib/jquery.event.drag-2.3.0.js"></script>

<script src="../slick.core.js"></script>
<script src="../slick.dataview.js"></script>
<script src="../slick.grid.js"></script>
<script src="../controls/slick.gridmenu.js"></script>

<script>
  var dataView;
  var grid;
  var gridMenu;
  var data = [];
  var options = {
    enableCellNavigation: true,
    showHeaderRow: true,
    headerRowHeight: 30,
    explicitInitialization: true,
    forceFitColumns: false,
    alwaysShowVerticalScroll: true, // this is necessary when using Grid Menu with a small dataset

    // gridMenu Object is optional
    // when not passed, it will act as a regular Column Picker (with default Grid Menu image of drag-handle.png)
    gridMenu: {
      customTitle: "Custom Menus",
      columnTitle: "Columns",
      hideForceFitButton: false,
      hideSyncResizeButton: false,
      // iconImage: "../images/drag-handle.png", // this is the Grid Menu icon (hamburger icon)
      // iconCssClass: "fa fa-bars",    // you can provide iconImage OR iconCssClass
      leaveOpen: false,                 // do we want to leave the Grid Menu open after a command execution? (false by default)
      // menuWidth: 18,                 // width that will be use to resize the column header container (18 by default)
      resizeOnShowHeaderRow: true,
      customItems: [
        {
          iconImage: "../images/delete.png",
          title: "Clear Filters",
          disabled: false,
          command: "clear-filter"
        },
        {
          iconImage: "../images/info.gif",
          title: "Toggle Filter Row",
          disabled: false,
          command: "toggle-filter"
        },
        {
          iconImage: "../images/info.gif",
          title: "Toggle Top Panel",
          disabled: false,
          command: "toggle-toppanel"
        },
        {
          divider: true,
          command: ""
        },
        {
          iconCssClass: "icon-help",
          title: "Help",
          command: "help"
        },
        {
          iconImage: "",
          title: "Disabled Command",
          disabled: true,
          command: "custom-command"
        }
      ]
    }
  };
  var columns = [{ id: 'id', field: 'id', name: '#', width: 40, excludeFromGridMenu: true }];
  var columnFilters = {};

  for (var i = 0; i < 10; i++) {
    columns.push({
      id: i,
      name: String.fromCharCode("A".charCodeAt(0) + i),
      field: i,
      width: 60
    });
  }

  function loadData(count) {
    data = [];
    for (var i = 0; i < count; i++) {
      var d = (data[i] = {});
      d["id"] = i;
      for (var j = 0; j < columns.length; j++) {
        d[j] = Math.round(Math.random() * 10);
      }
    }
    dataView.setItems(data);
  }

  function filter(item) {
    for (var columnId in columnFilters) {
      if (columnId !== undefined && columnFilters[columnId] !== "") {
        var c = grid.getColumns()[grid.getColumnIndex(columnId)];
        if (item[c.field] != columnFilters[columnId]) {
          return false;
        }
      }
    }
    return true;
  }

  function toggleGridMenu(e) {
    gridMenuControl.showGridMenu(e);
  }

  $(function () {
    dataView = new Slick.Data.DataView();
    grid = new Slick.Grid("#myGrid", dataView, columns, options);
    gridMenuControl = new Slick.Controls.GridMenu(columns, grid, options);


    dataView.onRowCountChanged.subscribe(function (e, args) {
      grid.updateRowCount();
      grid.render();
    });

    dataView.onRowsChanged.subscribe(function (e, args) {
      grid.invalidateRows(args.rows);
      grid.render();
    });


    $(grid.getHeaderRow()).on("change keyup", ":input", function (e) {
      var columnId = $(this).data("columnId");
      if (columnId != null) {
        columnFilters[columnId] = $.trim($(this).val());
        dataView.refresh();
      }
    });

    grid.onHeaderRowCellRendered.subscribe(function(e, args) {
        $(args.node).empty();
        $("<input type='text'>")
           .data("columnId", args.column.id)
           .val(columnFilters[args.column.id])
           .appendTo(args.node);
    });

    grid.init();

    dataView.beginUpdate();
    dataView.setItems(data);
    dataView.setFilter(filter);
    loadData(1000);
    dataView.endUpdate();

    // subscribe to Grid Menu event(s)
    gridMenuControl.onCommand.subscribe(function(e, args) {
      if(args.command === "toggle-filter") {
        grid.setHeaderRowVisibility(!grid.getOptions().showHeaderRow);
      }
      else if(args.command === "toggle-toppanel") {
        grid.setTopPanelVisibility(!grid.getOptions().showTopPanel);
      }
      else if(args.command === "clear-filter") {
        $('.slick-headerrow-column').children().val('');
        for (var columnId in columnFilters) {
          columnFilters[columnId] = "";
        }
        dataView.refresh();
      } else {
        alert("Command: " + args.command);
      }
    });

    // subscribe to event when column visibility is changed via the menu
    gridMenuControl.onColumnsChanged.subscribe(function(e, args) {
      console.log('Columns changed via the menu');
    });

    // subscribe to event when menu is closing
    gridMenuControl.onMenuClose.subscribe(function(e, args) {
      console.log('Menu is closing');
      grid.autosizeColumns();
    });

    grid.onAutosizeColumns.subscribe(function(e, args) {
      console.log('onAutosize called')
    });
  })
</script>
</body>
</html>
